<template>
  <div class="popover">
    <div>{{props.text}}</div>
    <el-popover :placement="props.placement" effect="dark" :width="props.width" trigger="hover">
      <div class="content">{{props.content}}</div>
      <template #reference>
        <div class="reference">
          <img src="@/assets/image/customer/help_icon.png" alt="" />
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  content: {
    type: String,
    default: '',
  },
  text: {
    type: String,
    default: '',
  },
  width: {
    type: [Number, String],
    default: '',
  },
  placement: {
    type: String,
    default: 'top',
  },
})
</script>

<style scoped lang="scss">
.content {
  text-align: center;
}

.popover {
  line-height: 1;
  height: 16px;
  display: flex;


  .reference {

    img {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
  }
}
</style>